<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        svg {
            border: 1px solid;
            display: block;
            margin-bottom: 20px;
        }
    </style>
</head>

<body>
    <svg width="200" height="100"></svg>

    <input type="text" id="txt">
    <input type="button" value="验证">

    <script src="../tools.js"></script>
    <script>
        const svg = document.querySelector('svg');
        const btn = document.querySelector('[type="button"]');

        function render() {
            let str = '';
            for (let i = 1; i <= 5; i++) {
                str += `<line x1=${random(200)} y1=${random(100)} x2=${random(200)} y2=${random(100)} stroke=rgb(${random(255)},${random(255)},${random(255)}) stroke-width=${random(1, 3)} />`;
            }

            let word = 'QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm1234567890';
            let text = '';
            for (let i = 0; i < 4; i++) {
                let index = random(word.length - 1);
                text += word[index];
            }
            str += `<text x="10" y="50" font-size="40" font-weight="bold">${text}</text>`;
            svg.innerHTML = str;
            return text;
        }
        let text = render(); // 码

        svg.onclick = function () {
            text = render();
        }
        btn.onclick = function () {
            if (txt.value.toUpperCase(txt.value) == text.toUpperCase(text)) {
                console.log('ok');
            } else {
                console.log('no');
            }
        }



    </script>
</body>

</html>